<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="厂家名称:">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入厂家名称"
                  />
                </el-form-item>

                <el-form-item label="关键字:">
                  <el-input
                    v-model="formInline.keywords"
                    placeholder="请输入关键字"
                  />
                </el-form-item>

                <el-form-item label="厂家电话:">
                  <el-input
                    v-model="formInline.iphone"
                    placeholder="请输入厂家电话"
                  />
                </el-form-item>

                <el-form-item label="状态">
                  <el-select
                    v-model="formInline.state"
                    placeholder="请选择状态"
                    style="width: 100px"
                  >
                    <el-option label="正常" value="正常" />
                    <el-option label="禁用" value="禁用" />
                  </el-select>
                </el-form-item>

                <el-form-item label="创建时间" required>
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker
                        v-model="formInline.time"
                        type="date"
                        label="请选择时间"
                        placeholder="请选择时间"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm">提交</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </el-form-item>
              </el-form>
              <el-button type="primary" :icon="Plus" @click="drawer = true">
                添加工厂
              </el-button>
            </span>
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="producterId" label="厂家ID" width="180" />
          <el-table-column prop="producterName" label="厂家名称" />
          <el-table-column prop="producterCode" label="厂家编码" />
          <el-table-column prop="producterAddress" label="联系人" />
          <el-table-column prop="producterTel" label="电话" />
          <el-table-column prop="keywords" label="关键字" />
          <!-- <el-table-column prop="status" label="状态" /> -->
          <!-- 判断是否为1，如果是1，则显示禁用，否则显示正常 -->

          <el-table-column prop="status" label="状态" :formatter="xiao" />

          <el-table-column label="操作">
            <el-button type="text" @click="handleEdit(producterId)">
              编辑
            </el-button>

            <el-button type="text" @click="handleDelete(producterId)">
              删除
            </el-button>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:currentPage="formInline.currentPage4"
          v-model:page-size="formInline.pageSize4"
          :page-sizes="[5, 10, 20, 30]"
          :disabled="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import request from "@/utils/request";
import DictAPI from "@/api/dict";
import { selectDictLabel } from "@/utils/his-util";
import { Edit, Plus } from "@element-plus/icons-vue";
//抽屉的
const drawer = ref(false);

const formInline = reactive({
  name: "",
  keywords: "",
  iphone: "",
  state: "",
  time: "",
  currentPage4: 1,
  pageSize4: 5,
});

const ruleFormRef = ref<FormInstance>();
const table = ref();
function submitForm() {
  console.log("您点击了提交按钮" + formInline);
  return request({
    url: "/api/v1/StockProvider/selectStock",
    method: "POST",
    data: formInline,
  }).then((date) => {
    console.log(date);
    tableData.value = date.records;
    formInline.currentPage4 = date.current;
    table.value = date.total;
    console.log("请求成功");
    console.log(resultStatusMap.value);
  });
}

//重置按钮
const resetForm = () => {
  //所有的清空
  formInline.name = "";
  formInline.keywords = "";
  formInline.iphone = "";
  formInline.state = "";
  formInline.time = "";
  //表单重置
  ruleFormRef.value?.resetFields();

  console.log("重置成功");
};

//表格
interface Product {
  id: number;
  name: string;
  code: string;
  contacts: string;
  iphone: number;
  keywords: string;
  newTime: string;
}

const tableData = ref(<any[]>[]);

interface Dept {
  value: string;
  label: string;
}

// 翻译检查状态
const resultStatusMap = ref<any[]>([]);
DictAPI.getOptions("status").then((res: any) => {
  resultStatusMap.value = res;
});
const resultStatusFormatter = (row: any) => {
  const status = row.resultStatus;
  const statusLabel = selectDictLabel(resultStatusMap.value, status);
  return statusLabel;
};

const xiao = (a: any, b: any, c: any, d: any) => {
  c = selectDictLabel(resultStatusMap.value, c);
  return c;
};

function handleEdit(id: number) {
  console.log("您点击了编辑按钮" + id);
}

function handleDelete(id: number) {
  console.log("您点击了删除按钮" + id);
}

//翻页
const handleSizeChange = (val: number) => {
  submitForm();
};
const handleCurrentChange = (val: number) => {
  submitForm();
};

//进入页面自动点击查询
submitForm();
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
